<template>
  <div>
    <el-button type="primary" @click="changenum">添加商品属性</el-button>
    <el-table :data="goods.subsign.attribute" border style="width: 100%" current-row-key="index">
      <el-table-column prop="id" label="参数名称" min-width="80">

        <template slot-scope="scope">
          <el-select
            no-data-text="无数据"
            slot="empty"
            prop="attribute_id"
            v-model="goods.subsign.attribute[scope.$index].attribute_id"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :value="item.value"
            ></el-option>
          </el-select>

        </template>
      </el-table-column>

      <el-table-column prop="value" label="参数值" min-width="80">
        <template slot-scope="scope">
          <el-input v-model="goods.subsign.attribute[scope.$index].value" placeholder="请输入内容"></el-input>
        </template>
      </el-table-column>

      <el-table-column label="操作" min-width="80">
        <template slot-scope="scope">
          <el-button type="danger" @click="deleteoption(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
//引入vuex
import { mapState } from "vuex";

export default {
  data() {
    return {
      options: []
    };
  },
  methods: {
    changenum() {
      this.$store.commit('goodsAddattribute')
    },
    deleteoption(e) {
      this.$store.commit('goodsDeleteattribute',e)

    }
  },
  computed: {
    ...mapState(["goods"])
  }
};
</script>

<style>
</style>